<!-- Horizontal Form -->

<div class="box box-info">
	<meta charset="UTF-8">
	<div class="box-header with-border">
		<h3 class="box-title">留言板块</h3>
	</div>
	<!-- /.box-header -->
	<!-- form start -->
	<form class="form-horizontal">
		<div class="box-body">
			<div class="form-group">
				<label for="nameId" class="col-sm-2 control-label">留言信息</label>
				<div class="col-sm-10">
					<textarea id="msg" cols="100" rows="10"></textarea>
				</div>

			</div>

		</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
	<button type="button" class="btn btn-info pull-right btn-save">提交</button>
</div>
<div class="box-body table-responsive no-padding">
	<form>
		<table class="table table-hover" id="msglist">
			<thead>
				<tr>
					<th width="100px">用户名</th>
					<th width="300px">留言时间</th>
					<th>留言内容</th>
				</tr>
			</thead>
			<tbody id="tbodyId">
			</tbody>
		</table>
	</form>
</div>
</form>

</div>

<script type="text/javascript"
	src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
<script type="text/javascript">
  var zTree; 
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  
  $(function(){
	 /*  $("#msglist")
	   .load("doShowMsg",doSetTableBodyRows);  */
	  
	  $(".form-horizontal")
	  .on("click",".load-sys-msg",doLoadZtreeNodes)
	  
	  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)
	  .on("click",".btn-save",doSaveOrUpdate);
	  
	  $("#treeLayer")
      .on("click",".btn-confirm",doSetSelectNode)
      .on("click",".btn-cancel",doHideTree)

	  var data=$("#mainContentId").data("rowData");
	  if(data)doInitEditFormData(data);


  });


		function doInitEditFormData(data) {
			$("#nameId").val(data.name);
			$("#sortId").val(data.sort);
			$("#noteId").val(data.note);
			$("#parentId").val(data.parentName);
			$("#parentId").data("parentId", data.parentId);
		}

		function doCancel() {
			$("#mainContentId").load("msg/msg_list", function() {
				$("#mainContentId").removeData();
				$("#parentId").removeData();
			})
		}
		
		function doSaveOrUpdate() {
			//1.获取表单数据
			var params = doGetEditFormData();
			var rowData = $("#mainContentId").data("rowData");
			if (rowData)params.id = rowData.id;
			//2.定义url
			var insertUrl = "msg/doSaveMsg";
			//var updateUrl = "dept/doUpdateObject";
			//var url = rowData ? updateUrl : insertUrl;
			//3.异步提交数据
			$.post(insertUrl, params, function(result) {
				if (result.state == 1) {
					alert(result.message);
					//doCancel();
					doGetObjects();
				} else {
					alert(result.message);
				}
			});
		}

		function doGetEditFormData() {
			var params = {
				username : $("#username").val(),
				sort : $("#sortId").val(),
				note : $("#noteId").val(),
				msg : $("#msg").val(),
				parentId : $("#parentId").data("parentId")
			}
			console.log(params)
			return params;
		}

		function doHideTree() {
			$("#treeLayer").css("display", "none");
		}
		//确定按钮
		function doSetSelectNode() {
			//1.获取选中的节点对象
			var nodes = zTree.getSelectedNodes();
			if (nodes.length == 0)
				return;
			var node = nodes[0];
			console.log(node);
			//2.将对象中内容,填充到表单
			$("#parentId").data("parentId", node.id);
			$("#parentId").val(node.name);
			//3.隐藏树对象
			doHideTree();
		}

		function doLoadZtreeNodes() {
			//显示div
			$("#treeLayer").css("display", "block");
			var url = "dept/doFindZTreeNodes";
			//异步加载数据,并初始化数据
			$.getJSON(url, function(result) {
				if (result.state == 1) {
					//使用init函数需要先引入ztree对应的js文件
					zTree = $.fn.zTree
							.init($("#zTreeId"), setting, result.data);
				} else {
					alert(result.message);
				}
			})
		}

		
		//呈现数据
		 $(function(){
			 //
			doGetObjects();
		});
		
		
		function doGetObjects(){
			var url="msg/doShowMsg"
				$.getJSON(url,function(result){
					   //请问result是一个字符串还是json格式的js对象？对象
					   debugger
			    	   doHandleResponseResult(result);
					 }
				   );
		}
		
		function doHandleResponseResult (result){ //JsonResult
			   if(result.state==1){//ok
				//更新table中tbody内部的数据
				doSetTableBodyRows(result.data);//将数据呈现在页面上 
			    }else{
				alert(result.msg);
			    }  
		 }
		function doSetTableBodyRows(data){
			   //1.获取tbody对象，并清空对象
			   var tBody=$("#tbodyId");
			   tBody.empty();
			   //2.迭代records记录，并将其内容追加到tbody
			   for(var i in data){
				   //2.1 构建tr对象
				   var tr=$("<tr></tr>");
				   //2.2 构建tds对象
				   var tds=doCreateTds(data[i]);
				   //2.3 将tds追加到tr中
				   tr.append(tds);
				   //2.4 将tr追加到tbody中
				   tBody.append(tr);
			   }
		   }
		
		function doCreateTds(row){
			   console.log(row);
			   var tds=
			     "<td>"+row.username+"</td>"+
			     "<td>"+new Date(row.time).toLocaleString()+"</td>"+
			     "<td>"+row.msg+"</td>"
		       return tds;
		   }
		
	</script>








